;
(function($) {

	$.fn.imageupload = function(arg) {
		var defaultConfig = {
			/**
			 * 必填
			 * 上传服务器地址
			 * 上传成功返回JSONString格式:{"ok":true,"id":"XXXXXXX"}
			 * 上传失败返回JSONString格式:{"ok":false,"msg":"XXXXXXX"}
			 */
			url: "",
			/**
			 * 必填
			 * 保存上传成功id的input的name
			 */
			name: "",
			/**
			 * 允许上传的图片后缀
			 */
			type: "jpg,jpeg,gif,png",
			/**
			 * 允许图片最大大小
			 */
			maxSize: 1024 * 1024 * 100, //100MB
			/**
			 * 提示信息
			 * @param {String} msg
			 */
			alert: function(msg) {
				alert(msg);
			},
			/**
			 * 是否显示在之前
			 */
			before:true,
			/**
			 * 是否多图上传
			 */
			multiple: true,
			/**
			 * 上传图片的字段名
			 */
			fieldName: "file",
			/**
			 * 上传图片时附件的表单数据
			 * 格式1:{fieldName:fieldValue,...}
			 * 格式2:[{name:fieldName,value:fieldValue},...]
			 */
			postData: {}
		}
		var config = $.extend(defaultConfig, arg);
		$(this).data("imageUploadConfig", config);
		$(this).addClass("_imageupload");
		return this;
	}

	$(function() {
		var imageuploadInput = $("<input style='display:none;' type='file' autocomplete='off' />").appendTo("body");
		var currentBtn = null;
		var imageuploadTemplate = $('<div class="upload-img-item animated"><div class="close">×</div><input /><div class="progress" style="width: 0%;"></div></div>');

		
		
		imageuploadTemplate.on("click", function() {
			var tempItem = $(this).clone().appendTo("body");
			tempItem.addClass("upload-img-big").addClass("zoomIn");
			setTimeout(function(){
				tempItem.removeClass("zoomIn");
			},1000);
			tempItem.click(function(){
				tempItem.addClass("zoomOut");
				setTimeout(function(){
					tempItem.remove();
				},1000);
			});
			
			return false;
		});
		imageuploadTemplate.children(".close").on("click", function() {
				$(this).parent().remove();
				return false;
		});

		$("body").on("click", "._imageupload", function() {
			currentBtn = $(this);
			imageuploadInput.click();
			return false;
		});
		
		$.fn.imageShow = function(args){
			var $this = $(this);
			var config = $this.data("imageUploadConfig");
			if(!$.isArray(args)){
				args = [args];
			}
			$.each(args, function(i,v) {
				var item = imageuploadTemplate.clone(true);
				item.css("background-image", "url(" + v.url + ")");
				item.children(".progress").remove();
				item.children("input").attr("name",config.name);
				item.children("input").attr("value",v.id);
				if(config.before){
					$this.before(item);
				}else{
					$this.after(item);
				}
			});
		}
		
		imageuploadInput.on("change", function() {
			if(imageuploadInput.val() != "") {
				
				var config = currentBtn.data("imageUploadConfig");
				
				
				

				/**
				 * 获取上传文件后缀
				 */
				var ext = imageuploadInput.val();
				if(ext.lastIndexOf(".") > -1) {
					ext = ext.substring(ext.lastIndexOf(".") + 1).toLowerCase();
				} else {
					ext = "unknow";
				}

				/**
				 * 检查后缀
				 */
				if(("," + config.type + ",").toLowerCase().indexOf("," + ext + ",") == -1) {
					config.alert("只允许上传图片格式:" + config.type);
					imageuploadInput.val("");
					return false;
				}

				/**
				 * 检查大小
				 */
				var file = imageuploadInput[0].files[0];
				if(file.size > config.maxSize) {
					config.alert("文件大小超过最大值:" + config.maxSize);
					imageuploadInput.val("");
					return false;
				}

				/**
				 * 如果非多图模式,就把前面的先删了
				 */
				if(!config.multiple){
					currentBtn.prevAll(".upload-img-item").remove();
				}

				/**
				 * 初始化显示效果
				 */
				var item = imageuploadTemplate.clone(true);
				if(config.before){
					currentBtn.before(item);
				}else{
					currentBtn.after(item);
				}
				var reader = new FileReader();
				reader.onloadend = function() {
					var dataURL = reader.result;
					item.css("background-image", "url(" + dataURL + ")");
				}
				reader.readAsDataURL(file);

				/**
				 * 上传图片
				 */
				var formData = new FormData();
				if($.isArray(config.postData)) {
					$.each(config.postData, function(i, v) {
						formData.append(v.name, v.value);
					});
				} else {
					$.each(config.postData, function(i, v) {
						formData.append(i, v);
					});
				}
				formData.append(config.fieldName, imageuploadInput[0].files[0]);
				imageuploadInput.val("");

				$.ajax({
					type: 'POST',
					url: config.url,
					data: formData,
					processData: false, // 不会将 data 参数序列化字符串
					contentType: false, // 根据表单 input 提交的数据使用其默认的 contentType
					xhr: function() {
						var xhr = new window.XMLHttpRequest();
						xhr.upload.addEventListener("progress", function(evt) {
							if(evt.lengthComputable) {
								var percentComplete = evt.loaded*100 / evt.total;
								item.children(".progress").css("width",percentComplete+"%");
							}
						}, false);
						return xhr;
					},
					dataType:"json",
					success:function(data) {
						console.info(data);
//						data = eval("("+data+")");
						if(data.ok){
							item.children(".progress").remove();
							item.addClass("upload-img-success");
							item.children("input").attr("name",config.name)
							item.children("input").attr("value",data.id);
						}else{
							item.addClass("upload-img-error");
							item.children(":not(:first)").remove();
							item.append(data.msg);
						}
					},
					error:function(err) {
						item.addClass("upload-img-error");
						item.children(":not(:first)").remove();
						item.append("未知错误");
						console.error(err);
					}
				});
			}
		});

	});
})(jQuery);